import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { Form, Card, List } from 'antd';
import { imageOrigin } from '../config';

import styles from './Projects.less';

/* eslint react/no-array-index-key: 0 */

@connect(({ pictures, loading }) => ({
  pictures,
  loading: loading.models.list,
}))
@Form.create()
class CoverCardList extends PureComponent {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'pictures/fetch',
    });
  }

  render() {
    const {
      pictures: { data },
      loading,
    } = this.props;
    const cardList = data ? (
      <List
        rowKey="id"
        loading={loading}
        pagination={{
          ...data.pagination,
          onChange: page => {
            const { dispatch } = this.props;
            dispatch({
              type: 'pictures/fetch',
              payload: page,
            });
          },
        }}
        grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
        dataSource={data.list}
        renderItem={item => (
          <List.Item>
            <Card
              className={styles.card}
              hoverable
              cover={
                <img
                  alt={item.createdAt}
                  src={`${imageOrigin}${item.hash}`}
                  style={{ width: '225px', height: '220px' }}
                />
              }
            >
              <div className={styles.cardItemContent}>
                <span>上传于:{moment(item.createdAt).fromNow()}</span>
              </div>
            </Card>
          </List.Item>
        )}
      />
    ) : null;

    return (
      <div className={styles.coverCardList}>
        <div className={styles.cardList}>{cardList}</div>
      </div>
    );
  }
}

export default CoverCardList;
